/**
 * 〈所属模块〉
 * 〈功能描述〉
 *
 * @author Lcs
 * @date 2017/9/15 13:27
 */

import React, { Component } from "react";
import {
  StyleSheet, Text, View, Image, ScrollView, TextInput,
} from "react-native";
import { connect } from "react-redux"; // 引入connect函数

import { TouchableOpacity } from "react-native-gesture-handler";
import {
  Color, ScreenWidth, FontSize, scale,
} from "../common";
import NavigatorUtil from "../utils/NavigatorUtil";
import * as placeServiceOrderAction from "../actions/placeServiceOrderAction"; // 导入action方法
import BasePage from "../widget/common/BasePage";
import Button from "../widget/common/NCButton";
import TagGroup from "../widget/common/TagGroup";
import DataPickerRow from "../widget/common/DataPickerRow";
import { fDateCommon } from "../utils/utils";
import EnumConstants from "../common/EnumConstants";

const { OrderType } = EnumConstants;

const COMMONWIDTH = ScreenWidth - scale * 32;

let isService;

class PlaceServiceOrder extends Component {
  constructor(props) {
    super(props);
    isService = NavigatorUtil.getPageParam(props, "type") === OrderType.SERVICE;
  }

  componentWillMount() {
    const { props } = this;
    const param = NavigatorUtil.getPageParam(props, "param");
    props.dispatch(placeServiceOrderAction.getDefaultAddress());
    if (isService) {
      props.dispatch(
        placeServiceOrderAction.initOrderService(param.service_id, param.facility_id, param.service_price_id),
      );
    } else {
      props.dispatch(
        placeServiceOrderAction.initOrderUpdate(param.facility_id, param.upgrade_lable_id, param.upgrade_price_id),
      );
    }
  }

  componentWillUnmount() {
    const { props } = this;
    props.dispatch(placeServiceOrderAction.unmount());
  }

  handleChooseAddress() {
    const { props } = this;

    NavigatorUtil.goAddressListCallBack(() => {
      props.dispatch(placeServiceOrderAction.getDefaultAddress());
    });
  }

  renderAddress() {
    const { placeServiceOrderReducer } = this.props;
    const { address } = placeServiceOrderReducer;
    return (
      <View style={styles.shadowContainer}>
        <TouchableOpacity onPress={() => this.handleChooseAddress()} style={styles.addressConatiner}>
          <View style={styles.addressContentConatiner}>
            {address ? (
              <View>
                <View style={styles.addressRowConatiner}>
                  <Text style={styles.textName}>{address.real_name}</Text>
                  <Text style={styles.textMobile}>{address.cell_phone}</Text>
                </View>
                <Text style={styles.textDesc}>
                  {`${[address.province_name, address.city_name, address.county_name].join("-")}${
                    address.detail_address
                  }`}
                </Text>
              </View>
            ) : (
              <Text>设置默认收货地址</Text>
            )}
          </View>

          <Image source={require("../img/ic_arrow_right.png")} style={styles.imgArrow} />
        </TouchableOpacity>
      </View>
    );
  }

  renderServiceWay() {
    const { props } = this;
    const { placeServiceOrderReducer } = props;
    const { data, serviceTypeList } = placeServiceOrderReducer;
    return (
      <TagGroup
        title="维修方式"
        desc="(目前仅支持部分地区上门)"
        columnNum={3}
        data={serviceTypeList}
        keyName="name"
        onChange={d => props.dispatch(placeServiceOrderAction.changeServiceWay(d))}
        valueName="index"
      />
    );
  }

  renderDataTime() {
    const { props } = this;
    const { placeServiceOrderReducer } = props;
    const { dateTime, remark } = placeServiceOrderReducer;
    return (
      <View style={styles.wayContent}>
        <DataPickerRow
          name="选择时间"
          onDataSelected={data => props.dispatch(placeServiceOrderAction.changeDatetime(data))}
          defaultValue={dateTime}
        />
        <View style={styles.divider} />
        <Text style={styles.textRemark}>留言备注</Text>
        <View style={styles.inputContainer}>
          <TextInput
            ref={c => (this.input = c)}
            value={remark}
            onChangeText={text => props.dispatch(placeServiceOrderAction.changeRemark(text))}
            style={styles.input}
            multiline
            underlineColorAndroid={Color.transparent}
            placeholder="备注内容:请在这里写下你需要备注的信息"
            enablesReturnKeyAutomatically={false}
            placeholderTextColor={Color.text_assist}
          />
        </View>
      </View>
    );
  }

  renderDeviceInfo() {
    const { props } = this;
    const { placeServiceOrderReducer } = props;
    const { data } = placeServiceOrderReducer;
    const price = isService ? data.make_price : data.lable_price;
    return (
      <View style={styles.commonContent}>
        <Text style={styles.textDeviceName}>{data.facility_name}</Text>
        <View style={styles.row}>
          <Text style={styles.textAssist}>{isService ? "维修方案：" : "升级方案："}</Text>
          <Text style={styles.textSubDesc}>{isService ? data.price_title : data.lable_name}</Text>
        </View>
        <View style={styles.rowSpace}>
          <Text style={styles.textAssist}>维修费</Text>
          <Text style={styles.textPrice}>{`￥${price}`}</Text>
        </View>
        <View style={styles.rowSpace}>
          <Text style={styles.textAssist}>上门费</Text>
          <Text style={styles.textPrice}>{`￥${price}`}</Text>
        </View>
        <View style={styles.priceContainer}>
          <Text style={styles.textAssist}>总金额:</Text>
          <Text style={styles.textAllPrice}>{`￥${price}`}</Text>
        </View>
      </View>
    );
  }

  handleClick() {
    const { props } = this;
    const { placeServiceOrderReducer } = props;
    const {
      facilitySign, dateTime, serviceTypeList, curServiceWayIndex, remark, address,
    } = placeServiceOrderReducer;
    if (isService) {
      props.dispatch(
        placeServiceOrderAction.palceServiceOrder(
          facilitySign,
          serviceTypeList[curServiceWayIndex].id,
          fDateCommon(dateTime),
          remark,
          address,
          serviceOrderId => {
            NavigatorUtil.goOrderSuccess(serviceOrderId, OrderType.SERVICE);
          },
        ),
      );
    } else {
      props.dispatch(
        placeServiceOrderAction.palceUpdateOrder(
          facilitySign,
          serviceTypeList[curServiceWayIndex].id,
          fDateCommon(dateTime),
          remark,
          address,
          upgradeOrderId => {
            NavigatorUtil.goOrderSuccess(upgradeOrderId, OrderType.UPDATE);
          },
        ),
      );
    }
  }

  renderButton() {
    return (
      <View style={styles.commonContent}>
        <Button
          onPress={() => this.handleClick()}
          buttonStyle={styles.btnContainer}
          textStyle={styles.buttonText}
          title="立即下单"
        />
      </View>
    );
  }

  render() {
    const { placeServiceOrderReducer } = this.props;
    const { initing } = placeServiceOrderReducer;
    return (
      <BasePage style={styles.container} showIniting={initing} hasInput>
        <ScrollView style={styles.container}>
          <View style={styles.wayContent}>
            {this.renderAddress()}
            {this.renderServiceWay()}
            {this.renderDataTime()}
          </View>
          {this.renderDeviceInfo()}
          {this.renderButton()}
        </ScrollView>
      </BasePage>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  wayContent: {
    width: ScreenWidth,
    backgroundColor: Color.white,
    alignItems: "center",
  },
  textSubDesc: {
    fontSize: FontSize.SIZE_12,
    color: Color.text_desc,
  },
  textPrice: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_price,
  },
  textAllPrice: {
    marginLeft: scale * 14,
    fontSize: FontSize.SIZE_18,
    color: Color.text_title,
  },
  row: {
    width: COMMONWIDTH,
    flexDirection: "row",
    alignItems: "center",
    marginTop: scale * 11,
    marginBottom: scale * 9,
  },
  rowSpace: {
    width: COMMONWIDTH,
    height: scale * 40,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  priceContainer: {
    paddingVertical: scale * 16,
    flexDirection: "row",
    alignItems: "center",
    width: COMMONWIDTH,
    justifyContent: "flex-end",
  },
  commonContent: {
    marginTop: scale * 8,
    width: ScreenWidth,
    backgroundColor: Color.white,
    alignItems: "center",
  },
  imgArrow: {
    width: scale * 20,
    height: scale * 20,
  },
  dataTimeContainer: {
    width: COMMONWIDTH,
    height: scale * 48,
    flexDirection: "row",
    alignItems: "center",
  },
  dataTimeSubContainer: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
  },
  shadowContainer: {
    elevation: 2,
    shadowOffset: { height: 1 },
    shadowColor: Color.black,
    shadowOpacity: 0.1,
    marginTop: scale * 16,
  },
  addressConatiner: {
    flexDirection: "row",
    width: COMMONWIDTH,
    height: scale * 95,
    alignItems: "center",
    paddingLeft: 20 * scale,
    paddingRight: 18 * scale,
    backgroundColor: Color.white,
  },
  addressContentConatiner: {
    flex: 1,
    marginRight: scale * 14,
  },
  textName: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_title,
    fontWeight: "bold",
  },
  textMobile: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_assist,
    marginLeft: scale * 6,
  },
  textMain: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_content,
  },
  textDesc: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_desc,
  },
  addressRowConatiner: {
    flexDirection: "row",
    marginBottom: scale * 8,
  },
  buttonText: {
    fontSize: FontSize.SIZE_17,
    color: Color.text_title,
  },
  btnContainer: {
    height: 44 * scale,
    width: ScreenWidth - 88 * scale,
    marginTop: 28 * scale,
    marginBottom: 28 * scale,
    borderRadius: 5 * scale,
    borderWidth: 0,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Color.tab_yellow,
  },
  textDeviceName: {
    width: COMMONWIDTH,
    fontSize: FontSize.SIZE_16,
    color: Color.text_title,
    marginTop: scale * 18,
  },
  textAssist: {
    fontSize: FontSize.SIZE_12,
    color: Color.text_assist,
  },
  divider: {
    width: COMMONWIDTH,
    height: StyleSheet.hairlineWidth,
    backgroundColor: Color.divider_secondary,
  },
  textRemark: {
    width: COMMONWIDTH,
    fontSize: FontSize.SIZE_14,
    color: Color.text_title,
    marginTop: scale * 14,
    marginBottom: scale * 14,
  },
  inputContainer: {
    padding: scale * 16,
    width: COMMONWIDTH,
    height: 70 * scale,
    borderWidth: 0,
    borderRadius: scale * 5,
    marginTop: scale * 15,
    marginBottom: scale * 24,
    backgroundColor: Color.background_native,
  },
  input: {
    flex: 1,
    color: Color.text_title,
    fontSize: FontSize.SIZE_14,
    paddingTop: 0,
    paddingBottom: 0,
  },
});

const reducers = state => {
  return {
    placeServiceOrderReducer: state.placeServiceOrderReducer,
  };
};
export default connect(reducers)(PlaceServiceOrder);
